﻿<div ng-controller="productController">
    <div class="wrapper border-bottom white-bg page-heading">
        <div class="col-lg-pull-12">
            <ol class="breadcrumb">
                <li><a ui-sref="app.product.list">商品</a></li>
                <li class="active" ng-bind="breadcrumb"></li>
            </ol>
        </div>
    </div>
    <form name="_form" class="form-horizontal w5c-form" w5c-form-validate="model.validateOptions" validfail="save_fail()" novalidate role="form">
        <uib-tabset active="active">
            <uib-tab heading="基本信息">
                <div class="panel">
                    <div class="panel-body">
                        <div class="row">
                            <label class="col-md-1 control-label" style="padding-left:0px;"><b>商品信息</b></label>
                            <div class="col-sm-4">
                                <p class="form-control-static"><button class="btn btn-primary btn-sm" type="button" ng-click="openModal()"><i class="fa fa-plus"></i> 增加跨境商品</button></p>

                            </div>
                            <div class="col-md-11">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品标题</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="name" class="form-control input-sm" ng-model="model.name" w5c-dynamic-element required ng-maxlength="100">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品描述</label>
                                    <div class="col-sm-6">
                                        <textarea name="short_description" rows="4" class="form-control input-sm" ng-model="model.short_description" w5c-dynamic-element required ng-minlength="10" ng-maxlength="1000"></textarea>
                                    </div>
                                    <div class="col-sm-4 row">
                                        <div class="alert alert-info" role="alert">
                                            商品描述显示在商品详情页商品名称下方.用于简短的描述该商品的概况，分享给好友时会显示这里的文案
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">价格</label>
                                    <div class="col-sm-3">
                                        <input type="number" name="price" class="form-control input-sm" ng-model="model.price" placeholder="销售价格" w5c-dynamic-element required pattern="^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$">
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="number" name="market_price" class="form-control input-sm" ng-model="model.market_price" placeholder="市场参考价格，只显示使用" w5c-dynamic-element pattern="^(?:[1-9][0-9]*|0)(\.[0-9]+)?$" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">结算价</label>
                                    <div class="col-sm-3">
                                        <input type="number" name="cost_price" class="form-control input-sm" ng-model="model.cost_price" placeholder="平台与供应商的最终结算价格" w5c-dynamic-element required pattern="^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$">
                                    </div>
                                </div>
                                <div class="form-group" ng-if="model.is_htl == 2">
                                    <label class="col-sm-2 control-label">参考价</label>
                                    <div class="col-sm-10">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr style="background-color:#f7f7f9;">
                                                    <th>规格名称</th>
                                                    <td>规格值</td>
                                                    <th width="100">成本价</th>
                                                    <th width="120">保质期开始</th>
                                                    <th width="120">保质期结束</th>
                                                    <th width="100">库存</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="(index,product_sku) in model.product_skus">
                                                    <td>{{product_sku.sku_name}}</td>
                                                    <td>{{product_sku.sku_path}}</td>
                                                    <td style="color:red;">{{product_sku.cost_price | currency:'￥'}}</td>
                                                    <td>{{product_sku.start_Exp_Date}}</td>
                                                    <td>{{product_sku.end_Exp_Date}}</td>
                                                    <td>{{product_sku.stock}}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">编码（可空）</label>
                                    <div class="col-sm-3">
                                        <input type="text" name="sku" class="form-control input-sm" ng-model="model.sku">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品分类</label>
                                    <div class="col-sm-10">
                                        <ui-select ng-model="model.category_id" theme="bootstrap">
                                            <ui-select-match placeholder="选择商品分类">{{$select.selected.name}}</ui-select-match>
                                            <ui-select-choices repeat="item.id as item in category | propsFilter: {name: $select.search}">
                                                <div><span ng-if="item.parent_id!=0" style="padding-left:{{20*(item.depth-1)}}px;"></span> {{item.name}}</div>
                                            </ui-select-choices>
                                        </ui-select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品类型</label>
                                    <div class="col-sm-2">
                                        <select class="form-control input-sm" ng-model="model.type">
                                            <option value="">选择商品类型</option>
                                            <option value="1">实物</option>
                                            <!--<option value="2">虚拟</option>-->
                                            <!--<option value="3">积分</option>-->
                                            <!--<option value="4">普惠积分</option>-->
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">是否开启分销</label>
                                    <label class="control-label" style="margin-left:15px;">
                                        <input type="checkbox" name="is_open" ng-model="model.is_open">
                                    </label>
                                </div>
                                <div class="form-group" ng-if="model.is_open == true">
                                    <label class="col-sm-2 control-label">价格分销比例</label>
                                    <div class="col-sm-3">
                                        <input type="number" name="path" class="form-control input-sm" ng-model="model.path" w5c-dynamic-element required ng-change="priceChange(model.path)">
                                    </div>
                                    <div class="col-sm-1 row"><p class="form-control-static">%</p></div>
                                    <label class="col-sm-2 control-label">佣金:</label>
                                    <div class="col-sm-1 row"><p class="form-control-static" style="color:red;">￥{{model.distribution_price}}</p></div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">排序</label>
                                    <div class="col-sm-3">
                                        <input type="number" name="top" class="form-control input-sm" ng-model="model.top">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label"><span class="text-danger">*</span>商品浏览图</label>
                                    <div class="col-sm-5">
                                        <input type="file" name="file" accept="image/*" multiple="multiple" class="form-control input-sm" ngf-select ng-model="model.file">
                                        <input type="hidden" name="imgs" class="form-control" ng-model="model.image_path" />
                                        <div ui-sortable ng-model="model.image_path">
                                            <div class="img-thumbnail pull-left" ng-repeat="img in model.image_path" style="position:relative;margin-right:5px;">
                                                <button type="button" class="close" ng-click="delete_image(img)" style="position:absolute;right:6px;">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                                <img ng-src="{{model.main_image_url != null?img:siteImg+img}}" class="img-thumbnail" ng-show="model.image_path" width="60" height="60">
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                        <!--<input name="model_image_path" type="hidden" ng-model="model.image_path.length" w5c-dynamic-element required pattern="^[1-5]+$" />-->
                                        <p style="margin-top:10px;">
                                            建议尺寸：640 x 640 像素；您可以拖拽图片调整图片顺序。
                                        </p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">是否境外</label>
                                    <label class="control-label" style="margin-left:15px;">
                                        <input type="checkbox" name="is_seas" ng-model="model.is_seas">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row" ng-if="model.is_htl == 0">
                            <label class="col-md-1 control-label" style="padding-left:0px;"><b>库存/规格</b></label>
                            <div class="col-md-11">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品规格</label>
                                    <div class="col-sm-10" ng-show="model.sku_infos.length>0">
                                        <div class="form-control-static" ng-repeat="(key,item) in model.sku_infos">
                                            <div class="alert alert-info row" role="alert" style="margin-left:0px;margin-right:0px;background-color: #efefef;border-color: #eeeeee;">
                                                <button type="button" class="close"><span ng-click="sku_chooses_del($index)">&times;</span></button>
                                                <div class="col-sm-4 row">
                                                    <p class="form-control-static">{{item.name}}</p>
                                                </div>
                                                <div class="clearfix"></div>
                                                <div>
                                                    <span class="label label-default" style="margin:5px;cursor:pointer" ng-repeat="sku_value in sel_sku_info[key].sku_values"
                                                          ng-class="{'label-primary':is_sku_valueed(item,sku_value)}" ng-click="sel_sku_value_change(item,sku_value)">
                                                        {{sku_value.name}}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-3" ng-class="{'col-sm-offset-2 row':model.sku_infos.length>0}">
                                        <ui-select ng-model="add_sel_sku_info" theme="bootstrap" on-select="sel_sku_info_change($item, $model)">
                                            <ui-select-match placeholder="新增规格">{{$select.selected.name}}</ui-select-match>
                                            <ui-select-choices repeat="item in sel_sku_infos | propsFilter: {name: $select.search}">
                                                <div ng-bind-html="item.name | highlight: $select.search"></div>
                                            </ui-select-choices>
                                        </ui-select>
                                    </div>
                                    <div class="col-sm-2"><p class="form-control-static"><a href="javascript:void(0);" ng-click="get_sku_info()">刷新</a> | <a ui-sref="app.product.sku_detail({action:'add'})" target="_blank">新增</a></p></div>
                                </div>
                                <div class="form-group" ng-show="model.product_skus.length>0">
                                    <label class="col-sm-2 control-label">商品库存</label>
                                    <ui-product-sku class="col-sm-10">
                                    </ui-product-sku>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">总库存</label>
                                    <div class="col-sm-2">
                                        <input type="number" name="stock" class="form-control input-sm" ng-model="model.stock" ng-disabled="model.product_skus.length>0" w5c-dynamic-element required pattern="^\d+$">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品属性</label>
                                    <div class="col-sm-10">
                                        <table class="table table-hover">
                                            <caption><a href="javascript:void(0);" ng-click="add_product_property()">新增</a></caption>
                                            <thead>
                                                <tr>
                                                    <th width="100">名称</th>
                                                    <th>内容说明</th>
                                                    <th width="75">操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr ng-repeat="(key,item) in model.props  track by $index">
                                                    <td><input ng-model="item.name" class="form-control input-sm" w5c-dynamic-name2="item.name_{{key}}" required /></td>
                                                    <td><input ng-model="item.value" class="form-control input-sm" w5c-dynamic-name2="item.value_{{key}}" required /></td>
                                                    <td>
                                                        <a class="btn btn-primary btn-xs" ng-click="del_product_property(key)"><i class="fa fa-trash"></i> 删除</a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uib-tab>
            <uib-tab heading="商品详情">
                <div class="panel">
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-1 control-label" style="padding-left:0px;"><b>商品详情</b></label>
                                <div class="col-md-11">
                                    <textarea keditor="editConfig" ng-model="model.description" name="description" rows="4" class="form-control input-sm" w5c-dynamic-element required></textarea>
                                    <span ng-show="_form.description.$invalid && !_form.description.$pristine" class="w5c-error">请填写商品详情</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </uib-tab>
        </uib-tabset>
        <div class="form-group">
            <div class="col-sm-offset-4 col-sm-6">
                <button type="submit" w5c-form-submit="save()" class="btn btn-primary btn-sm" btn-loading="psdisabled" loading-text="保存中..." ng-disabled="psdisabled">
                    <i class="fa fa-save"></i> 保存
                </button>
                <button ng-click="goBack()" class="btn btn-primary btn-sm"><i class="fa fa-rotate-left"></i> 取消</button>
            </div>
        </div>
    </form>
</div>
<script type="text/ng-template" id="modal.html">
    <p>
    <p class="modal-header"><h5 class="modal-title" align="center">商品列表</h5></p>
    <table class="table table-hover m-t-md">
        <thead>
            <tr>
                <th></th>
                <th>商品名称</th>
                <th width="80">商品描述</th>
                <th width="80">电商企业名称</th>
                <th width="80">规格型号</th>
                <th width="80">主要成分</th>
                <th width="80">用途</th>
                <th width="80">生产国</th>
                <th width="80">生产企业</th>
                <th width="80">产品品牌</th>
                <th width="80">供应商</th>
                <th width="80">审核状态</th>
                <th width="100">申报时间</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in data.rows">
                <td><input type="radio" name="product" value="{{item.id}}" /></td>
                <td>
                    <div class="media">
                        <!--<div class="media-left">
                             <a href="{{site.img_url+item.image_path[0]}}" target="_blank" class="thumbnail" style="width:60px;height:60px;">
                                  <img ng-src="{{site.img_url+item.image_path[0]}}" ng-show="item.image_path" width="60" height="60">
                           </a>
                        </div>-->
                        <div class="media-body">
                            <p class="media-heading">{{item.good_name}}</p>
                        </div>
                    </div>
                </td>
                <td>{{item.good_description}}</td>
                <td>{{item.company_name}}</td>
                <td>{{item.model}}</td>
                <td>{{item.ingredient}}</td>
                <td>{{item.application}}</td>
                <td>{{item.produc_country}}</td>
                <td>{{item.produc_company}}</td>
                <td>{{item.brand}}</td>
                <td>{{item.supplier}}</td>
                <td>{{audit_status(item.audit_status)}}</td>
                <td>{{item.create_time}}</td>
            </tr>
        </tbody>
    </table>
    <div class="row">
        <div class="col-md-10">
            <uib-pagination total-items="data.total_result" items-per-page="data.size" ng-model="data.page" num-pages="list.total_pages"
                            ng-change="search_page(data.page)" class="pagination-sm" boundary-links="true" boundary-link-numbers="true" max-size="20"
                            previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
            <span class="pull-right" style="margin: 30px 0px 20px 0px">共{{data.total_result}} 当前：{{data.page}}/{{data.total_pages}}</span>
        </div>
    </div>
    </p>
    <p class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">
            确认
        </button>
        <button class="btn btn-warning" ng-click="cancel()">
            退出
        </button>
    </p>
    </p>
</script>
<style type="text/css">
    .large-Modal .modal-dialog {
        height: 1000px;
        width: 1000px;
        /*margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;*/
    }
</style>